<template>
  <div class="container_main" style="position: relative">
    <!-- <div class="myTimepicker">
      <el-date-picker
        v-model="myPickDataTime"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div> -->

    <div class="container_top">
      <div class="top_left">
        <div class="part part0">
          <div class="title">全网平衡裕度<span>单位:MW</span></div>
          <div class="chart" id="phydChart" ref="phydChart"></div>
        </div>
        <div class="part part1">
          <div class="underprepare">
            <div class="info">
              <div class="info-title">最大负备用不足时刻</div>
              <div class="info-val">
                <span>{{ myMaxTimeUse }}</span>
              </div>
            </div>
            <div class="info">
              <div class="info-title">最大负备用不足电力</div>
              <div class="info-val">
                <span>{{ myMaxTimeUnless }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="part part2">
        <div class="title">调整策略<span>单位:MW</span></div>
        <div class="ploy-wrap">
          <block v-for="(item, index) in ployList" :key="index">
            <div class="ploy-row">
              <div
                :class="['ploy-title', item.titleClass]"
                @click="switchPloy(item.id)"
              >
                {{ item.title }}
              </div>
              <template v-if="item.id == 0">
                <div class="ploy-info-label">
                  <div style="width: 25%"></div>
                  <div class="label-des">理论调节能力</div>
                  <div class="label-des">调节量</div>
                  <div class="label-des">调节后负备用缺口</div>
                </div>
              </template>
              <template v-if="item.id != 0">
                <img class="ploy-arrow" src="@/assets/images/ploy-arrow.png" />
                <div class="ploy-infos">
                  <div
                    class="ploy-info"
                    v-for="(its, index2) in item.data"
                    :key="index2"
                  >
                    <span style="color: #00706b">{{ its.text }}</span>
                    <span style="color: #2e393a">{{ its.val1 }}</span>
                    <span style="color: #af9d24">{{ its.val2 }}</span>
                    <span style="color: #2e393a">{{ its.val3 }}</span>
                  </div>
                </div>
              </template>
            </div>
            <img
              v-if="index != ployList.length - 1"
              class="ploy-flow"
              src="@/assets/images/ploy-flow.png"
            />
          </block>
        </div>
      </div>
      <div class="part part3">
        <div class="title">调节贡献率</div>
        <div class="chart" id="ktzyChart" ref="ktzyChart"></div>
      </div>
    </div>
    <div class="container_bottom">
      <div class="part part4" v-if="currentPloyId == 3 || currentPloyId == 1">
        <div class="title">{{ myText }}</div>
        <div class="ta-btn-menu" style="margin: 20px auto">
          <el-button
            class="btn2"
            v-for="(item, index) in btnMenu2"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab2(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
        <div style="width: 100%; height: 260px; padding: 10px">
          <el-table
            :border="true"
            :fit="true"
            :cell-style="{ border: '1px solid #0C8F96', height: '35px' }"
            style="width: 99.4%"
            :row-style="setCityClass"
            :data="getValues"
            :show-header="false"
          >
            <el-table-column
              v-for="(item, index) in getHeaders"
              :key="index"
              :prop="item"
              :width="item == 'title' ? '100' : '60'"
              align="center"
            >
              <template slot-scope="scope">
                <block v-if="item != 'title' && scope.row.title == '下发状态'">
                  <img
                    v-if="scope.row[item] == '1'"
                    src="@/assets/images/business-down1.png"
                    style="width: 16px; height: 16px"
                  />
                  <img
                    v-if="scope.row[item] == '0'"
                    src="@/assets/images/business-down0.png"
                    style="width: 16px; height: 16px"
                  />
                </block>
                <block
                  v-else-if="item != 'title' && scope.row.title == '地区返回'"
                >
                  <img
                    v-if="scope.row[item] == '1'"
                    src="@/assets/images/business-up1.png"
                    style="width: 16px; height: 16px"
                  />
                  <img
                    v-if="scope.row[item] == '0'"
                    src="@/assets/images/business-up0.png"
                    style="width: 16px; height: 16px"
                  />
                </block>
                <block v-else>
                  <div
                    :class="[
                      scope.$index == 0
                        ? 'ta-head'
                        : item == 'title' || index % 2 != 0
                        ? 'ta-td-color1'
                        : 'ta-td-color2',
                    ]"
                  >
                    {{ scope.row[item] }}
                  </div>
                </block>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ta-btn-menu mu">
          <el-button
            class="btn3"
            v-for="(item, index) in btnMenu3"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab3(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
      </div>
      <div class="part part4" v-if="currentPloyId == 5">
        <div class="title">辅助服务市场</div>
        <div class="ta-btn-menu">
          <el-button
            class="btn1"
            v-for="(item, index) in btnMenu11"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab11(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
        <div style="width: 100%; height: 260px; padding: 10px">
          <div class="chart" id="serviceChart" ref="serviceChart"></div>
        </div>
        <div class="ta-btn-menu mu">
          <el-button
            class="btn3"
            v-for="(item, index) in btnMenu3"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab3(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
      </div>
      <div class="part part4" v-if="currentPloyId == 6">
        <div class="title">
          新能源调峰
          <div class="title-ipt">
            <span>统调集中式K值:</span>
            <el-input v-model="tabVal1"></el-input>
            <span>非统调集中式K值:</span>
            <el-input v-model="tabVal2"></el-input>
            <span>调度分布式K值:</span>
            <el-input v-model="tabVal3"></el-input>
          </div>
        </div>
        <div class="ta-btn-menu">
          <el-button
            class="btn1"
            v-for="(item, index) in btnMenu1"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab1(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
        <div class="ta-btn-menu">
          <el-button
            class="btn2"
            v-for="(item, index) in btnMenu2"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab2(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
        <div style="width: 100%; height: 260px; padding: 10px">
          <el-table
            :border="true"
            :fit="true"
            :cell-style="{ border: '1px solid #0C8F96', height: '35px' }"
            style="width: 99.4%"
            :row-style="setCityClass"
            :data="getValues"
            :show-header="false"
          >
            <el-table-column
              v-for="(item, index) in getHeaders"
              :key="index"
              :prop="item"
              :width="item == 'title' ? '100' : '60'"
              align="center"
            >
              <template slot-scope="scope">
                <block v-if="item != 'title' && scope.row.title == '下发状态'">
                  <img
                    v-if="scope.row[item] == '1'"
                    src="@/assets/images/business-down1.png"
                    style="width: 16px; height: 16px"
                  />
                  <img
                    v-if="scope.row[item] == '0'"
                    src="@/assets/images/business-down0.png"
                    style="width: 16px; height: 16px"
                  />
                </block>
                <block
                  v-else-if="item != 'title' && scope.row.title == '地区返回'"
                >
                  <img
                    v-if="scope.row[item] == '1'"
                    src="@/assets/images/business-up1.png"
                    style="width: 16px; height: 16px"
                  />
                  <img
                    v-if="scope.row[item] == '0'"
                    src="@/assets/images/business-up0.png"
                    style="width: 16px; height: 16px"
                  />
                </block>
                <block v-else>
                  <div
                    :class="[
                      scope.$index == 0
                        ? 'ta-head'
                        : item == 'title' || index % 2 != 0
                        ? 'ta-td-color1'
                        : 'ta-td-color2',
                    ]"
                  >
                    {{ scope.row[item] }}
                  </div>
                </block>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ta-btn-menu mu">
          <el-button
            class="btn3"
            v-for="(item, index) in btnMenu3"
            :key="index"
            :class="{ on: item.isActive }"
            @click="switchTab3(item)"
          >
            {{ item.text }}
          </el-button>
        </div>
      </div>
      <div class="part part5">
        <div class="title">平衡调整效果<span>单位:MW</span></div>
        <div class="chart" id="phtzChart" ref="phtzChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import mock from "@/utils/home/home.mockdata.js";
import {
  getAdjustment, // 业务流程模块的接口
  getAdjustmentNl, // 调整策略---调节能力-量-负备用接口
  getMaxTimeAndDl,
  getBalanceMargin,
} from "@/api/index/index.js";
export default {
  name: "business-province",
  data() {
    return {
      myMaxTimeUse: "",
      myMaxTimeUnless: "",

      dateTimeX: [],

      myText: "非统调常规电源减出力",
      tzclParams: {
        caseType: "20",
        dateTime: "2024-07-05",
      },

      tjnlParams: {
        boolValue: 0,
        caseType: "",
        dateTime: "",
        maxfbydl: "",
      },

      mycurrentUSENumber: 0,
      myPickDataTime: "2024-07-05",

      phydChart: undefined,
      phydChartOption: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["最大供电能力", "负荷预测", "最小供电能力"],
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "最大供电能力",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "负荷预测",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "最小供电能力",
            type: "line",
            data: [150, 232, 201, 154, 190, 330, 410],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
      ktzyChart: undefined,
      ktzyChartOption: {
        //color:['#478BF0','#00B4FF','#74ACEB','#5FBD96','#ADBCDA'],
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        //color:["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa", "#07a2a4"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["35%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 15,
            itemStyle: {
              borderWidth: 4, //扇区间加间隔
              borderColor: "#ffffff", //间隔为白色
              //borderRadius: 10
            },
            label: {
              show: true,
              position: "outside",
              alignTo: "edge",
              formatter: "{rate|{d}%}\n",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 20,
              rich: {
                rate: {
                  fontSize: 14,
                  color: "#222",
                },
              },
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              minTurnAngle: 90,
              maxSurfaceAngle: 180,
              lineStyle: {
                type: "dashed",
                cap: "round",
              },
              /*length: 15,
              length2: 10,
              maxSurfaceAngle: 80*/
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < 380 / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            data: [
              { value: 1348, name: "可调负荷" },
              { value: 735, name: "非统调常规机组" },
              { value: 580, name: "区域调峰" },
              { value: 484, name: "省内深调峰" },
              { value: 300, name: "区外售电" },
              { value: 235, name: "储能" },
              { value: 680, name: "统调常规机组" },
              { value: 484, name: "新能源调峰" },
            ],
          },
        ],
      },
      phtzChart: undefined,
      phtzChartOption: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "原始负备用缺口",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "理论调整后",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "计划调整后",
            type: "line",
            data: [150, 232, 201, 154, 190, 330, 410],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
      ployList: [
        {
          id: 0,
          title: "预平衡分析后，存在负备用缺口",
          bkSate: 0,
          status: "start",
          data: [{ text: "", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 1,
          title: "储能调峰",
          bkSate: 0,
          status: 0,
          data: [{ text: "储能调峰", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 2,
          title: "统调常规机组压降(燃气)",
          bkSate: 0,
          status: 0,
          data: [{ text: "统调常规机组", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 3,
          title: "非统调常规机组压降",
          bkSate: 0,
          status: 0,
          data: [{ text: "非统调常规机组", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 4,
          title: "区外(省间现货市场)",
          bkSate: 0,
          status: 0,
          data: [{ text: "区外售电增加", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 5,
          title: "辅助服务市场(调峰市场、可调负荷)",
          bkSate: 0,
          status: 0,
          data: [
            { text: "省内深调峰", val1: "0", val2: "0", val3: "0" },
            { text: "区域调峰", val1: "0", val2: "0", val3: "0" },
            { text: "可调负荷", val1: "0", val2: "0", val3: "0" },
          ],
        },
        {
          id: 6,
          title: "新能源调峰",
          bkSate: 0,
          status: 1,
          data: [{ text: "储能调峰", val1: "0", val2: "0", val3: "0" }],
        },
      ],
      currentPloyId: 1,
      btnMenu1: [
        { text: "统调集中式(NE)", isActive: false },
        { text: "非统调集中式(NE)", isActive: true },
        { text: "调度分布式(NE)", isActive: false },
        { text: "营销分布式(NE)", isActive: false },
      ],

      btnMenu11: [
        { text: "省内调峰市场", isActive: false },
        { text: "区域调峰市场", isActive: false },
        { text: "可调负荷市场", isActive: true },
        { text: "虚拟电厂调节", isActive: false },
      ],
      btnMenu2: [
        { text: "最大负备用不足时刻", isActive: true },
        { text: "理论下调能力600MW", isActive: false },
        { text: "省调调用需求500MW", isActive: false },
        { text: "地调可调300MW", isActive: false },
      ],
      btnMenu3: [
        { text: "省调下发", isActive: true },
        { text: "跳转至深调峰市场系统", isActive: false },
        { text: "新能源预测及调峰结果信息", isActive: false },
      ],
      tabVal1: 0.6,
      tabVal2: 0.75,
      tabVal3: 0.6,
      headers: [
        {
          prop: "city",
          label: "城市",
        },
        {
          prop: "maxVal",
          label: "理论最大可调",
        },
        {
          prop: "demand",
          label: "省调需求分解",
        },
        {
          prop: "real",
          label: "实际调用",
        },
        {
          prop: "status",
          label: "下发状态",
        },
        {
          prop: "back",
          label: "地区返回",
        },
      ],
      tableData: mock.business_tableData,
      serviceChart: undefined,
      serviceChartOption: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "可调负荷能力",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "可调负荷市场需求",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "可调出清中标",
            type: "line",
            data: [150, 232, 201, 154, 190, 330, 410],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
    };
  },

  computed: {
    getHeaders() {
      return this.tableData.reduce(
        (pre, cur, index) => pre.concat(`value${index}`),
        ["title"]
      );
    },
    getValues() {
      return this.headers.map((item) => {
        return this.tableData.reduce(
          (pre, cur, index) =>
            Object.assign(pre, { ["value" + index]: cur[item.prop] }),
          { title: item.label }
        );
      });
    },
  },
  created() {

    
    //生成X时间轴

    for (let i = 0; i < 24; i++) {
      let a;
      if (i < 10) {
        a = "0" + i;
      } else {
        a = i.toString();
      }
      for (let j = 1; j < 5; j++) {
        let b = (j * 15).toString();
        if (b === "60") {
          a =
            i < 10
              ? "0" + (Number(a) + 1).toString()
              : (Number(a) + 1).toString();
          b = "00";
        }
        this.dateTimeX.push(a + ":" + b);
      }
    }

    this.useMygetMaxTimeAndDl();
    //this.useMygetAdjustmentNl()// 调整策略
    // this.balanceMargin()
  },
  mounted() {
    //策略那块初始化背景样式
    this.switchPloy(6, 1); //默认新能源

    // this.phydChart = echarts.init(this.$refs.phydChart);
    // this.phydChartOption && this.phydChart.setOption(this.phydChartOption);

    let params = {
      dateType: "nowday",
      dateTime: "2024-07-05 00:00:00",
    };

    console.log("调用了");
    getBalanceMargin(params).then((res) => {
      this.phydChartOption.xAxis.data = this.dateTimeX;
      this.phydChartOption.xAxis.data = this.dateTimeX;

      // this.phydChartOption_rq.series[0].data = res.data.maxgdnl.data;
      // this.phydChartOption_rq.series[1].data = res.data.fhyc.data;
      // this.phydChartOption_rq.series[2].data = res.data.mingdnl.data;

      this.phydChartOption.series[0].data = res.data.maxgdnl.data;
      this.phydChartOption.series[1].data = res.data.fhyc.data;
      this.phydChartOption.series[2].data = res.data.mingdnl.data;

      this.phydChart = echarts.init(this.$refs.phydChart);
      this.phydChartOption && this.phydChart.setOption(this.phydChartOption);
    });

    //饼图
    this.ktzyChart = echarts.init(this.$refs.ktzyChart);
    var centerImg = require("../../../assets/images/pie-bg.png");
    var centerImg2 = require("../../../assets/images/adjust.png");
    var graphic1 = [
      {
        type: "image",
        id: "piebg",
        left: "center", //调整图片位置
        top: "center", //调整图片位置
        z: -10, //确保图片在饼图下方
        //设置图片样式
        style: {
          image: centerImg,
          width: 110,
          height: 110,
          //width: this.ktzyChart.getWidth() - 105,
          //height: this.ktzyChart.getHeight() - 105,
          opacity: 1,
        },
      },
      {
        type: "image",
        id: "piebg2",
        left: "center", //调整图片位置
        top: "center", //调整图片位置
        z: -5, //确保图片在饼图下方
        //设置图片样式
        style: {
          image: centerImg2,
          width: 50,
          height: 50,
          //width: this.ktzyChart.getWidth() - 105,
          //height: this.ktzyChart.getHeight() - 105,
          opacity: 1,
        },
      },
    ];
    this.ktzyChartOption.graphic = graphic1;
    this.ktzyChartOption && this.ktzyChart.setOption(this.ktzyChartOption);
    //
    this.phtzChart = echarts.init(this.$refs.phtzChart);
    this.phtzChartOption && this.phtzChart.setOption(this.phtzChartOption);
  },
  methods: {
    // 使用调整策略的接口
    useMyticlApi() {
      let params = {
        caseType: 20,
        dateTime: "2024-07-05",
      };

      setTimeout(() => {
        getMaxTimeAndDl(params).then((res) => {
          if (res.code !== 200) return;

          let theParams = {};
          this.myMaxTimeUse = res.data.time;
          this.myMaxTimeUnless = res.data.dl;
          // 调用第二个接口
        });
      }, 500);
    },

    useMygetMaxTimeAndDl() {
      let params = {
        caseType: 20,
        dateTime: "2024-07-05",
      };

      getMaxTimeAndDl(params).then((res) => {
        if (res.code !== 200) return;

        this.myMaxTimeUse = res.data.time;
        this.myMaxTimeUnless = res.data.dl;
      });
    },

    removeRegion(data) {
      return data.map((item) => {
        const { region, ...rest } = item;
        return rest;
      });
    },

    // 调整策略---调节能力-量-负备用接口
    useMygetAdjustmentNl() {
      getAdjustmentNl(this.getAdjustmentNl).then((res) => {
        if (res.code !== 200) return;
      });
    },
    // 业务流程模块的接口
    useMygetAdjustment() {
      getAdjustment(this.tzclParams).then((res) => {});
    },

    switchPloy(itemid, times) {
      // tit-yellow tit-green   tit-purple
      console.log(itemid, "999999999");

      if (itemid == 3 || itemid == 5 || itemid == 6 || itemid == 1) {
        this.myText = "非统调常规电源减出力";
        this.currentPloyId = itemid;
        if (itemid == 1) {
          // this.currentPloyId = 3
          this.myText = "储能调峰";
          this.btnMenu3 = [
            { text: "省调下发", isActive: true },
            { text: "跳转至地调系统", isActive: false },
          ];
        }
      }
      this.ployList[0].titleClass = "tit-purple";
      for (let i = 0; i < this.ployList.length; i++) {
        this.ployList[i].titleClass = "tit-grey";
      }

      if (this.mycurrentUSENumber == 0) {
        this.mycurrentUSENumber++;
        for (let i = 0; i < this.ployList.length; i++) {
          //第一个紫色背景
          // if (this.ployList[i].bkSate === 1) {
          //   this.ployList[i].titleClass = "tit-green";
          // } else {
          //   this.ployList[i].titleClass = "tit-grey";
          // }
        }
      } else {
        this.ployList[itemid].titleClass = "tit-green";

        // this.$confirm('是否进行添加', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '添加成功!'
        //   });

        // this.ployList[itemid].titleClass = 'tit-green';

        //   }).catch(() => {
        //     this.$message({
        //       type: 'info',
        //       message: '已取消'
        //     });

        //   });
      }

      // if(itemid == 1 ){
      //   itemid = 4
      // }

      this.$forceUpdate();

      // console.log(itemid,'999999999');

      // if( itemid = 1){
      //   this.currentPloyId = 3
      // }

      // if (this.ployList[itemid].bkSate == 0) {
      //   this.$message.warning('当前选项未设置')
      //   return
      // }

      console.log(this.currentPloyId, "看一眼id");
      if (this.currentPloyId == 3) {
        this.btnMenu3 = [
          { text: "省调下发", isActive: true },
          { text: "跳转至地调系统", isActive: false },
        ];
      } else if (this.currentPloyId == 5) {
        this.btnMenu3 = [{ text: "切换至可调负荷市场系统", isActive: false }];
        this.$nextTick(() => {
          this.serviceChart = echarts.init(this.$refs.serviceChart);
          this.serviceChartOption &&
            this.serviceChart.setOption(this.serviceChartOption);
        });
      } else if (this.currentPloyId == 6) {
        this.btnMenu3 = [
          { text: "省调下发", isActive: true },
          { text: "跳转至深调峰市场系统", isActive: false },
          { text: "新能源预测及调峰结果信息", isActive: false },
        ];
      } else if (this.currentPloyId == 1) {
        this.btnMenu3 = [
          { text: "省调下发", isActive: true },
          { text: "跳转至地调系统", isActive: false },
        ];
      }

      // this.ployList[i].titleClass = 'tit-green';
    },
    setCityClass({ row, rowIndex }) {
      if (rowIndex == 0) {
        //第一行当表头 设置背景色
        return { "background-color": "rgba(117,215,225,0.2)", height: "60px" };
        //return 'addCityClass';
      }
    },
    switchTab1(item) {
      if (!item.isActive) {
        this.btnMenu1.forEach((obj) => {
          obj.isActive = false;
        });
        item.isActive = true;
      }
    },
    switchTab11(item) {
      if (!item.isActive) {
        this.btnMenu11.forEach((obj) => {
          obj.isActive = false;
        });
        item.isActive = true;
      }

      this.currentPloyId = 1;
      this.myText = "虚拟电厂";

      this.btnMenu3 = [
        { text: "省调下发", isActive: true },
        { text: "跳转至地调系统", isActive: false },
      ];

      console.log(item, "这里来切换echarts");
    },
    switchTab2(item) {
      if (!item.isActive) {
        this.btnMenu2.forEach((obj) => {
          obj.isActive = false;
        });
        item.isActive = true;
      }
    },
    switchTab3(item) {
      if (!item.isActive) {
        this.btnMenu3.forEach((obj) => {
          obj.isActive = false;
        });
        item.isActive = true;
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
::v-deep .myTimepicker {
  position: absolute;
  top: -55px;
  right: 80px;
  z-index: 10;

  .el-button {
    width: 100px;
    height: 33px;
    padding: 0;
    border: none;
    margin: 0;
    // background: url(../../../images/views/home/TabNav.png) no-repeat
    //   center;

    background: url(../../../assets/images/views/home/TabNav.png) no-repeat
      center;

    &:hover,
    &:focus,
    &.on {
      // background: url(../../../assets/images/views/home/TabNavHover.png)
      //   no-repeat center;

      background: url(../../../assets/images/views/home/TabNavHover.png)
        no-repeat center;
      color: #444;
    }
  }

  .el-date-editor {
    width: 150px;
    height: 28px;
    border: 1px solid #82cbbe;
    bottom: -2px;
    margin-left: 10px;
    border-radius: 4px;

    ::v-deep .el-input__inner {
      border: none;
      padding-left: 10px;
      height: 26px;
      font-weight: bold;
    }

    ::v-deep .el-input__prefix {
      left: auto;
      font-size: 18px;
      right: 5px;
      color: #3f8d94;

      .el-input__icon {
        font-weight: bold;
      }
    }
  }
}

* {
  box-sizing: border-box;
}

.container_main {
  display: flex;
  flex-direction: column;

  .container_top {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .top_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .container_bottom {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.part {
  background: url(../../../assets/images/phyd_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .title {
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding-left: 47px;
    padding-right: 20px;
    box-sizing: border-box;
    color: #00706b;
    font-size: 18px;
    font-weight: bold;
    background: url(../../../assets/images/views/home/titleBg.png) left center
      no-repeat;

    span {
      font-size: 12px;
      float: right;
      color: #333;
      font-weight: normal;
    }

    .title-ipt {
      float: right;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      span {
        margin-right: 10px;
        color: #063b38;
        font-weight: 400;
      }

      .el-input {
        margin-right: 10px;
        width: 80px;
      }
    }
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}

.part0 {
  width: 380px;
  height: 340px;
}

.part1 {
  width: 380px;
  height: 126px;
}

.part3 {
  width: 380px;
  height: 480px;
}

.part2 {
  width: 1100px;
  height: 480px;
}

.part4,
.part5 {
  width: 930px;
  height: 450px;
}

.underprepare {
  background: url("../../../assets/images/underprepare.png") center center
    no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .info {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .info-title {
      font-size: 16px;
      color: #000;
      height: 42px;
      line-height: 42px;
    }

    .info-val {
      height: calc(100% - 42px);
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: #00706b;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}

.addCityClass {
  height: 40px !important;
  border-radius: 0 !important;
  background-color: rgba(117, 215, 225, 0.2) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #17274a !important;
}

.ta-head {
  color: #17274a;
  font-size: 14px;
  font-weight: bold;
}

.ta-td-color1 {
  color: #2e393a;
}

.ta-td-color2 {
  color: #af9d24;
}

.ta-btn-menu {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-button {
    border: none;
    font-size: 16px;
    text-align: center;
    padding: 2px 20px;
    margin-right: 3px;
    font-weight: bold;
  }

  .btn1 {
    height: 38px;
    line-height: 38px;
    padding: 2px 30px;
    background: url(../../../assets/images/business-btn1.png) no-repeat center;
    background-size: 100% 100%;

    &:hover,
    &:focus,
    &.on {
      color: #fff;
      background: url(../../../assets/images/business-btn11.png) no-repeat
        center;
      background-size: 100% 100%;
    }
  }

  .btn2 {
    height: 33px;
    line-height: 33px;
    background: url(../../../assets/images/business-btn2.png) no-repeat center;
    background-size: 100% 100%;

    &:hover,
    &:focus,
    &.on {
      color: #fff;
      background: url(../../../assets/images/business-btn22.png) no-repeat
        center;
      background-size: 100% 100%;
    }
  }

  &.mu {
    justify-content: flex-end;
    padding-right: 30px;
  }

  .btn3 {
    height: 33px;
    line-height: 33px;
    margin: -10px 10px 10px 10px;
    background: #8cd4e6;
    background-size: 100% 100%;

    &:hover,
    &:focus,
    &.on {
      color: #fff;
      background: #2e6e6a;
    }
  }
}

/*调整策略部分*/
.ploy-wrap {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ploy-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.ploy-title {
  width: 248px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #414346;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  background-size: 100% 100%;

  &.tit-green {
    background: url(../../../assets/images/ploy-green.png) no-repeat center;
  }

  &.tit-purple {
    background: url(../../../assets/images/ploy-purple.png) no-repeat center;
    cursor: inherit;
  }

  &.tit-yellow {
    background: url(../../../assets/images/ploy-yellow.png) no-repeat center;
  }

  &.tit-grey {
    background: url(../../../assets/images/ploy-grey.png) no-repeat center;
  }
}

.ploy-arrow {
  width: 42px;
  height: 36px;
  margin-right: 5px;
}

.ploy-flow {
  width: 14px;
  height: 24px;
  margin-left: 120px;
  margin-top: 0px;
  margin-bottom: -8px;
}

.ploy-infos {
  border: 1px solid #1ab394;
  box-shadow: 4px 3px 8px #89c0c6;
  border-radius: 5px;
  width: 740px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ploy-info {
  width: 100%;
  height: 22px;
  line-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    display: block;
    width: 25%;
    height: 100%;
    font-size: 12px;
    text-align: center;
  }
}

.ploy-info-label {
  position: absolute;
  width: 740px;
  top: 25px;
  left: 295px;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .label-des {
    width: 25%;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    background: url(../../../assets/images/ploy-label.png) center no-repeat;
    background-size: 134px 25px;
  }
}

// ::v-deep .el-progress-bar__outer {
//   background: #c1e0dd !important;
// }

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}
</style>
